import React from 'react';
import HomeIcon from './icons/HomeIcon';
import PlusCircleIcon from './icons/PlusCircleIcon';

interface BottomNavProps {
  currentView: 'home' | 'stats';
  onViewChange: (view: 'home' | 'stats') => void;
  onAddClick: () => void;
}

const BottomNav: React.FC<BottomNavProps> = ({ currentView, onViewChange, onAddClick }) => {
  return (
    <footer className="fixed bottom-0 left-0 right-0 z-20 w-full max-w-md mx-auto h-20">
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-slate-900 to-transparent"></div>
        <div className="relative flex justify-center items-center h-full">
            <div className="flex items-center justify-around w-full max-w-xs h-16 bg-slate-800/70 backdrop-blur-lg border border-slate-700/50 rounded-full shadow-2xl">
                <button 
                    onClick={() => onViewChange('home')}
                    className={`flex flex-col items-center justify-center w-20 transition-colors ${currentView === 'home' ? 'text-cyan-400' : 'text-slate-500 hover:text-slate-300'}`}
                >
                    <HomeIcon className="h-7 w-7" />
                    <span className="text-xs mt-1">主页</span>
                </button>
                <button onClick={onAddClick} className="w-20 h-20 -mt-10 bg-cyan-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/30 transform hover:scale-110 transition-transform">
                    <PlusCircleIcon className="h-10 w-10 text-white" />
                </button>
                <button 
                    onClick={() => onViewChange('stats')}
                    className={`flex flex-col items-center justify-center w-20 transition-colors ${currentView === 'stats' ? 'text-cyan-400' : 'text-slate-500 hover:text-slate-300'}`}
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-7 w-7">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v18M11.25 3v18M18.75 3v18" />
                    </svg>
                    <span className="text-xs mt-1">统计</span>
                </button>
            </div>
        </div>
    </footer>
  );
};

export default BottomNav;